<template>
  <el-dialog title="客户经理详情" :visible.sync="visible" width="50%">
    <el-descriptions title="客户经理信息" :column="2" border>
      <el-descriptions-item label="客户经理名称">{{ form.managerName }}</el-descriptions-item>
      <el-descriptions-item label="客户经理联系电话">{{ form.managerPhone }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ form.department }}</el-descriptions-item>
      <el-descriptions-item label="职位">{{ form.position }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ form.email }}</el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "OrgStructureSyncDetail",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: { ...this.formData }
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.form = { ...newVal };
      },
      deep: true
    }
  }
};
</script>

<style scoped lang="scss">
/* 样式可以根据需要自定义 */
</style>
